﻿@page "/components/tab"

<PageHeader Title="Tab 选项卡">
    用于承载同一层级下不同页面或类别的组件，方便用户在同一个页面框架下进行快速切换。
</PageHeader>

<Example Title="基础选项卡" RunStyle="@Code.BgRun">
    <Description>使用选项卡切换内容模块，操作后不会进行页面跳转。</Description>
    <RunContent>
        <Tab>
            <TabItem Title="选项卡1">选项卡1的内容</TabItem>
            <TabItem Title="选项卡2">选项卡2的内容</TabItem>
            <TabItem Title="选项卡3">选项卡3的内容</TabItem>
        </Tab>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<Tab>
    <TabItem Title=""选项卡1"">选项卡1的内容</TabItem>
    <TabItem Title=""选项卡2"">选项卡2的内容</TabItem>
    <TabItem Title=""选项卡3"">选项卡3的内容</TabItem>
</Tab>
```
")
    </CodeContent>
</Example>
<Example Title="带图标的选项卡" RunStyle="@Code.BgRun">
    <Description>在基础选项卡基础上，在每个标签前添加图标，方便用户快速理解。</Description>
    <RunContent>
        <Tab>
            <TabItem Title="首页" Icon="IconName.Home">首页的内容</TabItem>
            <TabItem Title="日程" Icon="IconName.Calendar">日程的内容</TabItem>
            <TabItem Title="事项" Icon="IconName.ViewList">事项的内容</TabItem>
        </Tab>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<Tab>
    <TabItem Title=""选项卡1"">选项卡1的内容</TabItem>
    <TabItem Title=""选项卡2"">选项卡2的内容</TabItem>
    <TabItem Title=""选项卡3"">选项卡3的内容</TabItem>
</Tab>
```
")
    </CodeContent>
</Example>

<Example Title="不同尺寸的选项卡" RunStyle="@Code.BgRun">
    <Description>提供 大、中（默认）两种尺寸。</Description>
    <RunContent>
        <Tab>
            <TabItem Title="选项卡1">选项卡1的内容</TabItem>
            <TabItem Title="选项卡2">选项卡2的内容</TabItem>
            <TabItem Title="选项卡3">选项卡3的内容</TabItem>
        </Tab>

        <Tab Size="TabSize.Large">
            <TabItem Title="选项卡1">选项卡1的内容</TabItem>
            <TabItem Title="选项卡2">选项卡2的内容</TabItem>
            <TabItem Title="选项卡3">选项卡3的内容</TabItem>
        </Tab>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<Tab>
    <TabItem Title=""选项卡1"">选项卡1的内容</TabItem>
    <TabItem Title=""选项卡2"">选项卡2的内容</TabItem>
    <TabItem Title=""选项卡3"">选项卡3的内容</TabItem>
</Tab>

<Tab Size=""TabSize.Large"">
    <TabItem Title=""选项卡1"">选项卡1的内容</TabItem>
    <TabItem Title=""选项卡2"">选项卡2的内容</TabItem>
    <TabItem Title=""选项卡3"">选项卡3的内容</TabItem>
</Tab>
```
")
    </CodeContent>
</Example>
<Example Title="卡片选项卡" RunStyle="@Code.BgRun">
    <Description></Description>
    <RunContent>
        <Tab Card>
            <TabItem Title="选项卡1">选项卡1的内容</TabItem>
            <TabItem Title="选项卡2">选项卡2的内容</TabItem>
            <TabItem Title="选项卡3">选项卡3的内容</TabItem>
        </Tab>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<Tab Card>
    <TabItem Title=""选项卡1"">选项卡1的内容</TabItem>
    <TabItem Title=""选项卡2"">选项卡2的内容</TabItem>
    <TabItem Title=""选项卡3"">选项卡3的内容</TabItem>
</Tab>
```
")
    </CodeContent>
</Example>

<Example Title="禁用选项卡" RunStyle="@Code.BgRun">
    <Description></Description>
    <RunContent>
        <Tab>
            <TabItem Title="选项卡1">选项卡1的内容</TabItem>
            <TabItem Disabled Title="选项卡2">选项卡2的内容</TabItem>
            <TabItem Title="选项卡3">选项卡3的内容</TabItem>
        </Tab>

        <Tab Card>
            <TabItem Title="选项卡1">选项卡1的内容</TabItem>
            <TabItem Disabled Title="选项卡2">选项卡2的内容</TabItem>
            <TabItem Title="选项卡3">选项卡3的内容</TabItem>
        </Tab>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```html
<Tab>
    <TabItem Title=""选项卡1"">选项卡1的内容</TabItem>
    <TabItem Disabled Title=""选项卡2"">选项卡2的内容</TabItem>
    <TabItem Title=""选项卡3"">选项卡3的内容</TabItem>
</Tab>


<Tab Card>
    <TabItem Title=""选项卡1"">选项卡1的内容</TabItem>
    <TabItem Disabled Title=""选项卡2"">选项卡2的内容</TabItem>
    <TabItem Title=""选项卡3"">选项卡3的内容</TabItem>
</Tab>
```
        ")
    </CodeContent>
</Example>